﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" href="Images/ico/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link type="text/css" rel="stylesheet" href="/layui/css/layui.css"  media="all">
<script type="text/javascript" src="/layui/layui.js" charset="utf-8"></script>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/layui-post.js"></script>
<style type="text/css">
.desc{margin:5px 0;display: flow-root;}
.layui-layer-nobg{border-radius: 15px!important;background:#FFFFFF!important;}
.white-color{background: #fff;border-radius: 7px;}
.choosespace{position: absolute;margin-left: 50px; border: 1px solid red;border-radius: 50%; background: red;color: white;padding: 1px;font-size: 10px;width: 11px;height: 11px;text-align: center; line-height: 11px;}
.lists li {height: 50px;}
.layui-btn-xs {height: 25px; line-height: 25px; padding: 0 8px;}
.detailPrice{color: red;font-size: 25px;padding: 5px 10px;border-radius: 10px 10px 0 0; background: url(/images/d1.png);transform: translateY(-10px);}
.mainDetail{margin-top: 10px;padding: 10px;display: flow-root;}
.discussDetail{margin-top: 10px;padding: 10px;display: flow-root;}
.discussContent{margin-top: 10px;display: flow-root;}
.active-nums {background: yellow!important;}
</style>
</head>
<body style="background: #F0F0F0;">
<header class="ng-scope">
    <h4 class="title-order">
        <a class="title-top" href="javascript:window.history.back();"></a>
        <a class="title-center">商品评价</a>
        <a class="title-right" href="/index"></a>
    </h4>
</header>
<div class="ng-scope" style="margin-top: 50px;">
    <div class="white-color discussDetail">
        <div id="discussDetailShow">
            <div class="desc btn-type">
                <button class="layui-btn layui-btn-xs active-nums" data-value="" style="background: #B2ADAD66;border-radius: 5px;color: #000;"><span id="allNums">全部</span></button>
                <button id="goodBtn" class="layui-btn layui-btn-xs" data-value="3" style="background: #B2ADAD66;border-radius: 5px;color: #000;display: none;"><i class="layui-icon layui-icon-praise" style="color:red;"></i><span id="goodNums">0</span></button>
                <button id="badBtn" class="layui-btn layui-btn-xs" data-value="2" style="background: #B2ADAD66;border-radius: 5px;color: #000;display: none;"><i class="layui-icon layui-icon-tread"></i><span id="badNums">0</span></button>
            </div>
            <div class="desc">
                <ul class="discussContent"></ul>
            </div>
        </div>
    </div>
</div>
</body>
<script>
$.ajaxSetup({contentType: "application/json; charset=utf-8"});
var userInfo = $.parseJSON(sessionStorage.getItem("userInfo"));
var limit = 20;
layui.use(['layer','flow','element','util'], function(){
    layui.util.fixbar({
        top:true,css: {bottom: 105 },showHeight:100,
        click: function (type) {if (type === 'top') $('.layui-fluid').animate({scrollTop: 0}, 200);}
    });
    $.post("/cateringDiscuss/selectDiscuss",JSON.stringify({goodsId:getQueryString("goodsId"),status:0}),function(res){
        if(res.data.sumNums == 0){
            $(".discussDetail").html("<div>暂无评价，期待您的餐后评价</div>")
        }else{
            if(res.data.goodNums > 0) {
                $("#goodBtn").show()
                $("#goodNums").html(res.data.goodNums)
            }
            if(res.data.badNums > 0) {
                $("#badBtn").show()
                $("#badNums").html(res.data.badNums)
            }
        }
    })
    getData(getQueryString("type"))
    if(!isEmpty(getQueryString("type"))){
        $(".btn-type button").removeClass("active-nums")
        $(".btn-type button").each(function(e){
            if($(this).attr("data-value") == getQueryString("type")) $(this).addClass("active-nums")
        })
    }
    $(".btn-type button").click(function(){
        $(".btn-type button").removeClass("active-nums")
        $(this).addClass("active-nums")
        getData($(this).attr("data-value"))
    })
})
function getData(type){
    var loading = layer.load();
    $(".discussContent").empty()
    layui.flow.load({
        elem: '.discussContent', //流加载容器
        done: function(page, next){ //执行下一页的回调
            //模拟数据插入
            var lis = [];
            var data = {goodsId:getQueryString("goodsId"),status:0,page:page,limit:limit}
            if(!isEmpty(type)) data[type == 3?"gtEqByType":"ltEqByType"] = "descLv,"+type
            $.post("/cateringDiscuss/select",JSON.stringify(data),function(res){
                layer.close(loading);
                if(res.data.length > 0){
                    for(var i in res.data){
                        lis.push(
                            '<li style="margin-bottom: 10px; border-bottom: 1px solid #dbd8d8;display: flow-root">' +
                            '<div style="height: 50px;">' +
                            '<div style="width: 15%;float: left;height: 50px;line-height: 50px;"><img src="/img/header.png" style="width: 50px;height: 50px;"></div>' +
                            '<div style="width: 85%;float: left;height: 50px;">' +
                            '<div style="color: #000;line-height: 30px;">'+res.data[i].userName+'</div>' +
                            '<div style="font-size: 10px;">'+res.data[i].createTime.split(" ")[0].replaceAll("-",".")+'</div>'+
                            '</div>' +
                            '</div>' +
                            '<div style="color: #000;"><div style="width:85%;float:right; padding: 0 0 10px 0;color: #000;line-height: 25px;overflow-wrap: break-word;">'+
                            getDescLv(res.data[i]) +
                            (!isEmpty(res.data[i].content)?res.data[i].content:'')+'</div></div>' +
                            '</li>'
                        )
                    }
                    next(lis.join(''), page < Math.ceil(res.count/limit)); //假设总页数为 20
                }else{
                    $(".discussDetail").html('<div style="color:#868686; font-size: 16px;text-align:center;"><img src="images/zwsj.png" style="height:543px;width:474px;"></div>')
                }
            })
        }
    });
}
function getDescLv(data){
    if(data.descLv >= 3){
        return '<div style="font-size: 12px;"><i class="layui-icon layui-icon-praise" style="color:red;margin-right: 5px;font-size: 12px;"></i>赞了该商品</div>'
    }else {
        return '<div style="font-size: 12px;"><i class="layui-icon layui-icon-tread" style="margin-right: 5px;font-size: 12px;"></i>踩了该商品</div>'
    }
}
//弹窗计算价格
</script>
</html>
